var $ = layui.$;
/**
 * zmn 渠道-工单照片编辑
 * @author linfeng
 * @since 2020-09-17 11:18:36
 */
layui.define(['index', 'form', 'upload', 'zmnSelect'], function (exports) {
    let form = layui.form;
    let layer = layui.layer;
    let upload = layui.upload;
    let zmnSelect = layui.zmnSelect;
    form.render(null, "zmn-form");

    // 初始化下拉框
    zmnSelect.selectServCategory('servCategId', {
        selectedValues: json.obj.servCategId ? json.obj.servCategId.split(",").map(Number) : [],
        page: {enable: true, pageSize: 10},
        remote: {limitPermit: 10,}
    })

    reLoadImage("pictureSrc", json.obj.pictureSrc, "pictureSrcValue");
    // 初始化文件上传插件
    uploaderImage("pictureSrc", "pictureSrcValue", "jpg|jpeg", 1024 * 4);

    // 提交
    form.on('submit(zmn-form-submit)', function (obj) {

        var data = obj.field;
        data.relateId = data.id;
        var url = "/channel/workorder/picture/addEdit.action";

        if (!data.servCategId) {
            layer.msg("请选择服务类型！", {"icon": 2});
            return false;
        }
        $.ajax({
            async: false,
            type: "POST", url: url,
            contentType: "application/json", dataType: "json", data: JSON.stringify(data),
            success: function (result) {
                if (result.status == 200) {
                    parent.reload(result.message);
                    cancel();
                } else {
                    layui.layer.msg(result.message, {"icon": 2});
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
            }
        })
        return false;
    });

    /**
     * 描述: 图片上传方法
     * @param elemId
     * @param valueId
     */
    let indexUploadImags;

    function uploaderImage(elemId, valueId, exts, size) {
        upload.render({
            elem: '#' + elemId
            , exts: exts
            , acceptMime: 'image/*'
            , accept: 'images'
            , url: '/common/uploadFile.action?folderName=channelWorkOrderPicture' //改成您自己的上传接口
            , size: size
            , before: function (obj) {
                indexUploadImags = layui.layer.load(1, {
                    shade: [0.5, '#DBDBDB']
                });
            }
            , done: function (res) {
                if (res.code == 2) {
                    var data = res.data;
                    $("#" + valueId).val(data.src);
                    $("#" + elemId).attr("style", "background:url( " + data.src + "?" + Date.now() +
                        ");background-size:100% 100%;background-repeat:no-repeat;");
                    let next = $("#" + valueId).next();
                    let next1 = $(next).next();
                    $(next).attr("style", "visibility:hidden !important");
                    $(next1).attr("style", "visibility:hidden !important");
                } else {
                    layer.msg("上传失败！")
                }
                layui.layer.close(indexUploadImags);
            }
        });
    }

    function reLoadImage(elemId, value, valueId) {
        zmnUploadUtil.reLoadImage($, elemId, value, valueId);
    }

    // 对外暴露的接口
    exports('channel_workorder_picture_detail', {});
});

// 取消
function cancel() {
    let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
    parent.layer.close(index);
}

function deleteImg(element) {
    var elementValue = element + 'Value';
    document.getElementById(element).removeAttribute('style');
    Array.from(document.getElementById(element).children).forEach(function (item) {
        item.removeAttribute('style');
    });
    document.getElementById(elementValue).removeAttribute('value');
}

/**
 * 预览图片
 * @param element
 */
function previewImg(element) {
    // 调整预览大小
    var img = new Image();
    img.src = $('#' + element).attr('value');
    var imgHtml = "<img src='" + img.src + "' width='100%' height='100%'/>";
    // 弹出层
    layer.open({
        type: 1,
        shade: 0.8,
        offset: 'auto',
        area: [600 + 'px', 300 + 'px'],
        shadeClose: true,
        scrollbar: false,
        // 不显示标题
        title: "",
        // 捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
        content: imgHtml,
        cancel: function () {
            //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
        }
    });
}
